<template>
  <div class="vue-component">
    <h1 class="title">LESS in Vue</h1>
    <div class="container">
      <button class="btn">点击我</button>
      <div class="content">
        <p>测试内容</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LessTest',
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

<!-- CSS 样式 -->
<style>
  .vue-component {
    margin: 0 auto;
    max-width: 1200px;
  }

  /* 错误：重复选择器 */

  .vue-component {
    padding: 20px;
  }

  .title {
    color: #007bff;
    font-size: 24px;
  }

  /* 错误：命名颜色 */

  .content p {
    color: red;
    margin-top: 10px;
  }

  /* 错误：vendor 前缀 */

  .container {
    display: flex;
    transform: scale(1);
    transform: scale(1);
  }
</style>

<!-- LESS 样式 -->
<style lang="less">
  @primary-color: #007bff;
  @spacing: 10px;

  .less-section {
    margin-bottom: @invalidVarName;
    padding: @spacing;

    // 错误：变量命名不规范
    @invalidVarName: 20px;

    &__header {
      color: @primary-color;

      // 嵌套过深

      & > .item {
        font-weight: bold;

        &-text {
          font-style: italic;

          &:hover {
            color: darken(@primary-color, 10%);
          }
        }
      }
    }

    // mixin使用
    .button-style(@color) {
      background-color: @color;
      border-radius: 4px;
      padding: @spacing;
    }

    .btn {
      .button-style(@primary-color);
    }
  }
</style>
